---
id: 64a6702e7a7d00f97013ed0e
title: Блокова модель. Запитання G
challengeType: 15
dashedName: the-box-model-question-g
--- 
# --description--

<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/box-model-lines.png" alt="зображення, на якому показано вебсайт проєкту Odin, оточений червоними рамками, що вказує на те, що сайт складається з декількох компонентів" style="width: 95%; height: 95%;" />

На зображені вище можуть бути кружечки… Але коли мова йде про макети, все сходиться як прямокутні блоки, а не кружечки. Зрештою, розміщення всіх елементів на вебсторінці вирішує, як ви вкладатимете та складатимете ці блоки.

Єдине ускладнення в тому, що існує багато способів маніпулювати розмірами блоків та простором між ними за допомогою відступів, полів та кордонів. Якщо коротко підсумувати:

- `padding` (відступ) збільшує простір між кордоном та вмістом блоку.
- `margin` (поле) збільшує простір між кордонами суміжних блоків.
- `border` (кордон) додає простір між відступом та полем, навіть якщо це лише один піксель.

Обов’язково розглядайте картинки.

<img src="https://cdn.freecodecamp.org/curriculum/odin-project/the-box-model/the-box-model.png" alt="Візуальне представлення блокової моделі CSS з текстом, оточеним рожевим відступом (padding), фіолетовим кордоном (border) та полем (margin), позначеним стрілками, що пояснює відстань між текстом, краєм блоку та краєм вікна." />

# --assignment--

Додайте кордон до кожного елемента на сторінці та подивіться, як розміщені блоки.

# --question--

## --text--

Який порядок властивостей блокової моделі від середини до зовні?

## --answers--

Вміст, поле, відступ, кордон

---

Поле, відступ, вміст, кордон

---

Вміст, відступ, кордон, поле

---

Відступ, вміст, кордон, поле


## --video-solution--

3
